<template>
  <h4>一些状态的测试</h4>

  <span>User:</span>
  <input ref='userRef' type="text" placeholder="Type the user name" v-model="username">
  <span>Password:</span>
  <input ref='passRef' type="password" placeholder="Type the password" v-model="password">
  <button @click="doLogin">Login</button>
  <button @click="doLogout">Logout</button>

  <div>User: {{$store.state.userName}}, token: {{$store.state.token}}, visit count: {{$store.state.visitCount}}</div>
</template>

<script>
import {ref} from 'vue'
import {useStore} from 'vuex'

export default {
  setup() {
    const store = useStore()

    let userRef  = ref(null)
    let passRef  = ref(null)
    let username = ref('')
    let password = ref('')

    function doLogin() {
      if (!username.value) {
        alert('User name is required.')
        userRef && userRef.value.focus()
        return
      }
      if (!password.value) {
        alert('Password is required.')
        passRef && passRef.value.focus()
        return
      }
      store.dispatch('login', {username, password})
        .then(res => {
          console.log(res)
        })
    }

    function doLogout() {
      store.dispatch('logout')
    }

    return { userRef, passRef, username, password, doLogin, doLogout }
  },
}
</script>

<style scoped>

</style>